<template>
  <view class="content">
    <view class="head">
      <map
        :show-compass="true"
        :enable-building="true"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
      >
      </map>
    </view>
    <view class="body">
      <view class="cont">
        <view class="status">
          <text>已结束</text>
        </view>
        <view class="service">
          <text>联系客服</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "rideDetails",
  onLoad(value) {
    if (value) {
      this.alertInfo = JSON.parse(value.alertInfo);
      this.latitude = this.alertInfo.latitude;
      this.longitude = this.alertInfo.longitude;
      this.markers[0].longitude = this.alertInfo.longitude;
      this.markers[0].longitude = this.alertInfo.longitude;
    }
  },
  data() {
    return {
      alertInfo: {},
      latitude: 0,
      longitude: 0,
      markers: [
        {
          id: 0,
          latitude: 24.10014,
          longitude: 115.25984,
          iconPath: "/static/icon/pos.png",
          width: 20,
          height: 20,
          callout: {
            content: "报警地点",
            color: "#ffffff",
            fontSize: 16,
            textAlign: "center",
            bgColor: "#fc2f2f",
            borderRadius: 10,
            padding: 15,
            display: "ALWAYS",
          },
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  overflow: hidden;
  background-color: aliceblue;

  .head {
    map {
      width: 100%;
      height: 80vh;
    }
  }
  .body {
    width: 100%;
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .cont {
      width: 80%;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 50rpx 30rpx;
      border-radius: 20rpx;
      .status {
        color: #595959;
        font-size: 40rpx;
      }
      .service {
        color: #595959;
        padding: 10rpx 15rpx;
        border: 2rpx solid #acabab;
        border-radius: 30rpx;
        font-size: 26rpx;
      }
    }
  }
}
</style>